<template>
  <div class="v-text" @dblclick="showInput()">
    <input ref="inputRef" v-if="inputVisible" :value="textValue" type="text" onfocus="this.select()" @change="handleInputConfirm" />
    <span v-else>{{ textValue }}</span>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  props: ['propValue'],
  data() {
    return {
      inputVisible: false
    }
  },
  computed: {
    textValue() {
      return this.propValue
    }
  },
  methods: {
    ...mapMutations(['editorPropValue']),
    showInput() {
      this.inputVisible = true
      this.$nextTick(() => {
        this.$refs.inputRef.focus()
      })
    },
    handleInputConfirm(e) {
      this.inputVisible = false
      this.editorPropValue(e.target.value)
    }
  }
}
</script>

<style lang="less" scoped>
.v-text {
  position: absolute;
  min-width: 100px;
  max-width: 200px;
  min-height: 30px;
  line-height: 30px;
  border: 1px solid transparent;
  span {
    padding-left: 10px;
  }
  input {
    padding-left: 10px;
    border: 0;
    outline: none;
  }
}
</style>
